<template>
    <el-table :data="data">
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="isOnline" label="在线状态">
            <template #default="scope">{{
                scope.row.isOnline ? "在线" : "离线"
            }}</template>
        </el-table-column>
        <!-- 编辑 -->
        <el-table-column label="操作" width="250" class="operation">
            <template #default="scoped">
                <el-button
                    type="success"
                    size="small"
                    @click="handleEdit(scoped.row)"
                    >编辑</el-button
                >
                <el-button
                    v-if="scoped.row.type !== 'admin'"
                    type="danger"
                    size="small"
                    @click="handleDelete(scoped.row)"
                    >删除</el-button
                >
                <el-button
                    v-if="scoped.row.type !== 'admin' && scoped.row.isOnline"
                    type="warning"
                    size="small"
                    @click="handleReset(scoped.row)"
                    >强制下线</el-button
                >
            </template>
        </el-table-column>
    </el-table>
    <!-- 编辑用户信息弹框 -->
    <user-info-dialog
        v-model="isShowUserEditDialog"
        :isEdit="true"
        :userInfo="userInfo"
        :handleSubmit="handleSubmit"
    ></user-info-dialog>
</template>

<script setup>
import { ref } from "vue";
import { deleteUserHttp, modifyUserInfoHttp,logoutHttp} from "@/request";
import { ElMessage } from "element-plus";
import UserInfoDialog from "./UserInfoDialog.vue"; //用户信息弹框，用于修改密码和用户类型

const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
    syncUserData: {
        type: Function,
        required: true,
    },
});

//删除用户信息
const handleDelete = (row) => {
    console.log(row);
    // 发送请求删除用户信息
    deleteUserHttp({ username: row.username, type: row.type }).then((res) => {
        console.log(res);
        if (res.code === 200) {
            ElMessage.success("删除成功");
            // 同步数据
            props.syncUserData();
        }
    });
};

//强制下线用户
const handleReset = (row) => {
    console.log(row);
    // 发送请求强制下线用户
    logoutHttp({ username: row.username, type: row.type }).then((res) => {
        console.log(res);
        if (res.code === 200) {
            ElMessage.success("下线成功");
            // 同步数据
            props.syncUserData();
        }
    });
};

//修改用户信息弹窗
const isShowUserEditDialog = ref(false);
const oldType = ref(""); //记录旧的类型
const userInfo = ref({
    username: "",
    type: "",
    password: "",
    isOnline: "",
});

const handleEdit = (row) => {
    // 打开编辑弹窗
    isShowUserEditDialog.value = true;
    // 填充表单数据
    userInfo.value = {
        username: row.username,
        type: row.type,
        password: row.password,
    };
    // 记录旧的类型
    oldType.value = row.type;
};
const handleSubmit = (form) => {
    // 关闭弹窗
    isShowUserEditDialog.value = false;
    // 发送请求修改用户信息
    modifyUserInfoHttp({
        username: form.username,
        newType: form.type,
        newPassword: form.password,
        oldType: oldType.value,
    }).then((res) => {
        if (res.code === 200) {
            ElMessage.success("修改成功");
            // 同步数据
            props.syncUserData();
        }
    });
};
</script>

<style scoped>
:deep(.el-table__cell .cell) {
    display: flex;
    justify-content: center;
}
</style>
